<template>
  <div class="ant-row ant-form-item-row css-dev-only-do-not-override-htdnsb">
    <!-- 省份 -->
    <a-select
      v-model="form.province"
      :options="provinceOptions"
      placeholder="选择省份"
      @change="handleProvinceChange"
      allow-clear
    />
    </div>
    <div class="ant-row ant-form-item-row css-dev-only-do-not-override-htdnsb">
    <!-- 城市 -->
     城市：
    <a-select
      v-model="form.city"
      :options="cityOptions"
      placeholder="选择城市"
      allow-clear
      :key="cityKey"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'
import { getAllProvince, getCityByProvince } from '@/api/x/noQs'

const form = ref({
  province: '',
  city: ''
})

const provinceOptions = ref([])
const cityOptions = ref([])
const cityKey = ref(0)
// 初始化省份
getAllProvince().then(res => {
  provinceOptions.value = res.data.map(item => ({
    label: item.provinceName,
    value: item.provinceName
  }))
})

// 省份改变时，清空城市并拉接口
function handleProvinceChange(val) {
  form.value.city = ''
  cityKey.value += 1
  cityOptions.value = []
  if (!val) {
    cityOptions.value = []
    return
  }
  getCityByProvince({ provinceName: val }).then(res => {
    cityOptions.value = res.data.map(item => ({
      label: item.cityName,
      value: item.cityName
    }))
  })
}
</script>
